<template>
    <div style="background-color: #F2F2F2; padding: 20px;">
        <el-row>
            <el-col :span="4">
                <div class="grid-content title-wrapper">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item style="font-size: 18px;">仓库管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>
        <el-row>
            
        </el-row>

        <el-row style="margin-top: 10px;">

            <el-col :span="4">
                <el-input
                    placeholder="仓库名称"
                    v-model="param.name"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="4" :offset="1">
                <template>
                    <el-select v-model="param.cityId" clearable placeholder="所在城市">
                        <el-option
                        v-for="item in cityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>

            <el-col :span="4" :offset="1">
                <template>
                    <el-select v-model="param.districtId" clearable placeholder="所在区域">
                        <el-option
                        v-for="item in districtOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>

            <el-col :span="4" :offset="1">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="99999"
                    placeholder="仓库最小面积"
                    v-model="param.minArea"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="1" style="display: flex; justify-content: center; align-items: center;">
                <span style="padding-top: 8px;">～</span>
            </el-col>
            
            <el-col :span="4">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="99999" 
                    placeholder="仓库最大面积"
                    v-model="param.maxArea"
                    clearable>
                </el-input>
            </el-col>

        </el-row>

        <el-row style="margin-top: 20px;">

            <el-col :span="4">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="999" 
                    placeholder="最少骑手数"
                    v-model="param.minRiderCount"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="1" style="display: flex; justify-content: center; align-items: center;">
                <span style="padding-top: 8px;">～</span>
            </el-col>
            
            <el-col :span="4">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="999" 
                    placeholder="最大骑手数"
                    v-model="param.maxRiderCount"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="4" :offset="1">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="999" 
                    placeholder="最少分拣员数"
                    v-model="param.minSorterCount"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="1" style="display: flex; justify-content: center; align-items: center;">
                <span style="padding-top: 8px;">～</span>
            </el-col>
            
            <el-col :span="4">
                <el-input
                    type="number" 
                    :min="0"  
                    :max="999" 
                    placeholder="最大分拣员数"
                    v-model="param.maxSorterCount"
                    clearable>
                </el-input>
            </el-col>

            <el-col :span="2" :offset="1">
                <el-button type="primary" plain @click="queryWarehouseByConditionBtn">查询</el-button>
            </el-col>

            <el-col :span="2">
                <el-button type="info" plain @click="resetForm">重置</el-button>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-col :span="2" :offset="21">
                <div class="grid-content button-wrapper" style="text-align: right;">
                    <el-button type="primary" @click="goToAddWarehouse">+ 新增仓库</el-button>
                </div>
            </el-col>
        </el-row>

        <el-table 
            :data="warehouseList" 
            style="width: 100%; margin-top: 20px;" 
            border
            stripe
            row-key="id">
            <el-table-column prop="name" label="仓库名称" ></el-table-column>
            <el-table-column prop="cityName" label="所在城市" ></el-table-column>
            <el-table-column prop="districtName" label="所在区域"></el-table-column>
            <el-table-column prop="address" label="仓库地址"></el-table-column>
            <el-table-column prop="area" label="仓库面积"></el-table-column>
            <el-table-column prop="riderCount" label="骑手数"></el-table-column>
            <el-table-column prop="sorterCount" label="分拣员数"></el-table-column>
            <el-table-column label="操作" width="220" prop="status">
                <template #default="{row}">
                    <el-button @click="goToWarehouseDetails(row)">仓库详情</el-button>
                    <!--状态为0则为停用红色按钮，状态为1为启用绿色按钮  -->
                    <el-button type="danger" v-if="row.status==1" @click="handleChange(row)">停用</el-button>
                    <el-button type="success" v-else @click="handleChange(row)">启用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row>
            <el-col :span="24">
                <!-- 放分页 
                layout：设置页面显示的内容 
                -->
                <el-pagination
                    background
                    :page-sizes="[5,8,10,20,50]"
                    :page-size="pageSize"
                    :current-page="pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @next-click="nextPage"
                    @prev-click="prevPage"
                    @current-change="pageChange"
                    @size-change="SizeChange">
                </el-pagination>
            </el-col>
        </el-row>

        <router-view></router-view> <!-- 子路由会在这里渲染 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            warehouseList:[],
            insertChargeDialog: false,
            // 城市选项
            cityOptions: [],
            // 区域选项
            districtOptions: [],
            // 当前选中的城市 ID
            selectedCityId: null,
            param:{
                name: '',
                cityId: null,
                districtId: null,
                minArea: '',
                maxArea: '',
                minRiderCount: '',
                maxRiderCount: '',
                minSorterCount: '',
                maxSorterCount: ''
            },
            pageSize:8,
            pageNum:1,
            total:100
        }
    },
    methods: {
        queryWarehouseByConditionBtn(){
            this.pageNum  = 1;
            this.queryWarehouseByCondition();
        },
        //加载城市数据
        loadCities(){
            this.$axios.get('api/warehouse/queryCities')
            .then(resp => {
                if(resp.data.code == 200){
                    this.cityOptions = resp.data.data.map(city => ({
                        label: city.name,
                        value: city.id
                    }));
                }
            })
        },
        // 加载区域数据
        loadDistricts(cityId) {
            this.$axios.get('api/warehouse/queryDistricts/'+cityId)
            .then(resp => {
                if(resp.data.code == 200){
                    this.districtOptions = resp.data.data.map(district => ({
                        label: district.name,
                        value: district.id
                    }));
                }
            })
        },
        queryWarehouseByCondition(){
            let pageParam = {}
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/warehouse/queryListByCondition',pageParam)
            .then(resp => {
                if(resp.data.code == 200){
                    this.warehouseList = resp.data.data.list
                    this.total = resp.data.data.total
                }
            })
        },
        goToAddWarehouse() {
            this.$router.push({ path: 'addWarehouse' });
        },
        goToWarehouseDetails(row) {
            this.$router.push({  path: 'WarehouseDetails', query: { id: row.id } });
        },
        resetForm() {
            this.param = {
                name: '',
                cityId: null,
                districtId: null,
                minArea: '',
                maxArea: '',
                minRiderCount: '',
                maxRiderCount: '',
                minSorterCount: '',
                maxSorterCount: ''
            };
            this.districtOptions = [];
            this.queryWarehouseByCondition();
        },
        handleChange(row){
            this.$axios.get('api/warehouse/changeStatus/'+row.id)
            .then(resp => {
                if(resp.data.code == 200){
                    this.$message({
                        type: 'success',
                        message: '仓库状态修改成功！'
                    });
                    this.queryWarehouseByCondition();
                }
                else if(resp.data.code == 2103){
                    //跳出弹窗，仓库下有人员未解绑，无法停用/启用仓库
                    this.$message({
                        type: 'error',
                        message: '仓库下有员工未解绑，无法停用/启用仓库！'
                    });
                }
            })
        },
        nextPage(val){
            //用户点击下一页触发
            //val代表当前页
            this.pageNum = val;
            this.queryWarehouseByCondition();
        },
        prevPage(val){
            //用户点击上一页触发
            //val代表当前页
            this.pageNum = val;
            this.queryWarehouseByCondition();
        },
        pageChange(val){
            //直接切换界面
            this.pageNum = val;
            this.queryWarehouseByCondition();
        },
        SizeChange(val){
            //改变查询"几条/页"
            this.pageSize = val;
            this.queryWarehouseByCondition();
        }
    },
    watch: {
        // 监听城市ID变化
        'param.cityId'(newVal) {
            this.param.districtId = null; // 清空已选区域
            if(newVal) {
                this.loadDistricts(newVal);
            } else {
                this.districtOptions = [];
            }
        }
    },
    created() { 
        this.queryWarehouseByCondition();
        this.loadCities();
    },
}
</script>

<style scoped>
    .title-wrapper {
        padding: 10px;
        text-align: center;
    }
    .button-wrapper {
        margin-top: 20px;
    }
</style>